<template>
  <div class="container">
    <div class="header">
      <div class="title">桥梁净高监测</div>
      <div class="time">
        <img src="../../static/images/icon-time.png" alt="">
        <span>{{ currentYearMonth1 }}-{{ currentYearMonth2 }}</span>
      </div>
    </div>
    <div class="unit">单位:座</div>
    <div class="content">
      <div class="title">
        <div>内河等级航道桥梁概览</div>
        <img src="../../static/images/Subtract.png" alt="" @click="handleShow('first')" />
      </div>
      <div class="amount">
        <div class="info">
          <img src="../../static/images/bridge-bg-icon-one.png" alt="">
          <div class="detail">
            <div class="name">内河等级航道桥梁数量</div>
            <div class="value">{{ departBridgeTotal }}</div>
          </div>
        </div> 
      </div>
      <div class="subtitle">
        <div class="value">各区域中心内河等级航道桥梁分布图</div>        
      </div>
      <div id="firstChart" class="first-chart"></div>
      <div class="subtitle">
        <div class="value">各区域中心内河等级航道桥梁详情</div>        
      </div>
      <div class="table">
        <table
          style="border-collapse: collapse"
          cellspacing="0"
          cellpadding="0"
        >
          <thead>
            <tr>
              <th style="width: 80px;border: 1px solid #d9d9d9;">区域中心</th>
              <th style="width: 110px;border: 1px solid #d9d9d9;">等级航道<br>桥梁数量(座)</th>
              <th style="width: 110px;border: 1px solid #d9d9d9;">高等级航道<br>桥梁数量(座)</th>
            </tr>
          </thead>
        </table>
        <div class="tbody">
          <table
            style="border-collapse: collapse;border-spacing: 0;"
            cellspacing="0"
            cellpadding="0"
          >
            <tbody>
              <tr v-for="item in tableData1" :key="item.id">
                <td style="width: 80px;border: 1px solid #d9d9d9;">
                  <strong>{{ item.regionName }}</strong>
                </td>
                <td style="width: 110px;border: 1px solid #d9d9d9;">{{ item.regionBridgeTotal }}</td>
                <td style="width: 110px;border: 1px solid #d9d9d9;">{{ item.regionHighBridgeTotal }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div>桥梁净高监测详情</div>
        <img src="../../static/images/Subtract.png" alt="" @click="handleShow('second')" />
      </div>
      <div class="count1">
        <div class="info">
          <img src="../../static/images/bridge-bg-icon-two.png" alt="">
          <div class="detail">
            <div class="name">净高监测终端在线的桥梁数(座)</div>
            <div class="value">{{ clearHeightBridgeInstallSum }}</div>
          </div>
        </div> 
      </div>
      <!-- <div class="count2">
        <div class="info">
          <img src="../../static/images/bridge-bg-icon-three.png" alt="">
          <div class="detail">
            <div class="name">桥梁净高终端个数(个)</div>
            <div class="value">{{ clearHeightBridgeSum }}</div>
          </div>
        </div> 
      </div> -->
      <div class="subtitle">
        <div class="value">桥梁净高监测示意图</div>        
      </div>
      <div class="image">
        <img src="../../static/images/bridge-sketch.png" alt="">
        <!-- <div class="tip-one">
          <div>水位值<span>{{ waterLevel }}m</span></div>          
          <div v-if="waterlevelUpdateTime">数据更新时间</div>
          <div v-if="waterlevelUpdateTime">{{ waterlevelUpdateTime }}</div>
        </div> -->
        <div class="tip-two">
          <template v-if="upClearHeight && downClearHeight">
            <div>上行通航孔净高值<span>{{ upClearHeight }}m</span></div>
            <div>下行通航孔净高值<span>{{ downClearHeight }}m</span></div>
          </template>
          <template v-else>
            <div>通航孔净高值<span>{{ upClearHeight }}m</span></div>
          </template>          
          <!-- <div v-if="updateTime">数据更新时间</div>
          <div v-if="updateTime">{{ updateTime }}</div> -->
        </div>
        <!-- <div class="tip-three">
          <div>净高值<span v-if="qljg">{{ qljg }}m</span></div>
        </div> -->
      </div>
      <div class="search">
        <van-search
          v-model="searchValue"
          @search="onSearch"
          show-action
          :clearable="false"
          placeholder="请输入要查询的桥梁名称"
        >
          <template #action>
            <div @click="clickSearch">搜索</div>
          </template>
        </van-search>
        <div class="search-list" v-show="isShowSearchList">
          <div 
            v-for="(item,index) in searchList" 
            :key="index" 
            class="search-item"
            @click="handleChoose(item.bridgeName, item.regionName)"
          >
            {{ item.bridgeName }}
          </div>
        </div>
      </div>
      <div class="choose">
        <div class="left">
          <div class="option">
            <div @click="getLeftList">
              <input
                class="choose-input"
                type="text"
                placeholder="所属区域中心"
                readonly="readonly"
                v-model="leftVal"                
              />
              <van-icon :name="showLeft?'arrow-up':'arrow-down'" size="14" style="position: absolute;right: 2%;top: 20%;" />
            </div>
            <div class="choose-list" v-show="showLeft">
              <div class="list">
                <li                  
                  v-for="item in leftList"
                  @click="setLeft(item)"
                  :key="item.region"
                >
                  {{ item.region }}
                </li>
              </div>              
            </div>
          </div>
        </div>
        <div class="right">
          <div class="option">
            <div @click="getRightList">
              <input
                class="choose-input"
                type="text"
                placeholder="所属航道"
                readonly="readonly"
                v-model="rightVal"   
              />
              <van-icon :name="showRight?'arrow-up':'arrow-down'" size="14" style="position: absolute;right: 2%;top: 20%;" />
            </div>            
            <div class="choose-list" v-show="showRight">
              <div class="list">
                <li                 
                  v-for="item in rightList"
                  @click="setRight(item)"
                  :key="item.waterwayName"
                >
                  {{ item.waterwayName }}
                </li>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="table-box">
        <div class="table" style="margin-top: 20px; width: 720px">
          <table
            style="border-collapse: collapse"
            cellspacing="0"
            cellpadding="0"
          >
            <thead style="background: #f8f9fb;position: sticky;top: -1px;">
              <tr style="border: 1px solid #d9d9d9;">   
                <th style="width: 30px;"></th>               
                <th style="width: 80px">区域中心</th>
                <th style="width: 100px">所属桥梁</th>
                <th style="width: 140px">通航孔净高值(m)</th>
                <th style="width: 200px">所属航道</th>                              
                <th style="width: 180px">数据更新时间</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item,index) in tableData2" :key="index">
                <td style="width: 30px;">
                  <input type="radio" :checked="isChecked===index?true:false" @click="handleChecked(item,index)">
                </td>
                <td style="width: 80px">
                  <strong>{{ item.region }}</strong>
                </td>
                <!-- <van-popover :actions="[{text: item.bridgeName}]" position="top-start" actions-direction="horizontal" theme="dark">
                  <template #reference> -->
                    <td style="max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
                        {{ item.bridgeName }}
                    </td>
                  <!-- </template>
                </van-popover> -->
                <td style="width: 140px">
                  <template v-if="item.upClearHeight && item.downClearHeight">
                    <span>上行:{{ item.upClearHeight + ' ' }}</span>
                    <span>下行:{{ item.downClearHeight }}</span>
                  </template>
                  <template v-else>
                    <span>{{ item.upClearHeight }}</span>
                  </template>
                </td>  
                <td style="max-width: 200px;">{{ item.waterway }}</td>                                
                <td style="width: 180px">{{ item.updateTime }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div>桥梁净高监测查询</div>
        <img src="../../static/images/Subtract.png" alt="" @click="handleShow('')" />
      </div>
      <!-- <div class="search">
        <van-search
          v-model="searchValue2"  
          @search="onSearch2"       
          show-action
          placeholder="请输入要查询的桥梁名称"
        >
          <template #action>
            <div @click="clickSearch2">搜索</div>
          </template>
        </van-search>
        <div class="search-list" v-show="isShowSearchList2">
          <div 
            v-for="(item,index) in searchList2" 
            :key="index" 
            class="search-item"
            @click="handleChoose2(item.bridgeName)"
          >
            {{ item.bridgeName }}
          </div>
        </div>
      </div> -->
      <div class="subtitle" style="margin-top: 16px;">
        <div class="value">桥梁图片</div>        
      </div>
      <div class="image" v-if="bridgeImage">
        <img :src="`${baseApi}${bridgeImage}`" @error="e => { e.target.src = errorImg }">        
      </div>
      <div class="details">
        <table 
          style="border-collapse: collapse"
          cellspacing="0"
          cellpadding="0"
        >
          <thead>
            <tr>
              <th>区域中心</th>
              <th>所属航道</th>
              <th>所属桥梁名称</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ region }}</td>
              <td>{{ wateway }}</td>
              <td>{{ bridgeName }}</td>
            </tr>
          </tbody>
        </table>
        <table 
          style="border-collapse: collapse"
          cellspacing="0"
          cellpadding="0"
        >
          <thead>
            <tr v-if="upClearHeight && downClearHeight">
              <th>上行通航孔<br>净高值(m)</th>
              <th>下行通航孔<br>净高值(m)</th>
              <th>数据更新时间</th>
            </tr>
            <tr v-else>
              <th>通航孔<br>净高值(m)</th>              
              <th>数据更新时间</th>
              <th></th>
              <!-- <th>桥梁编号</th> -->
            </tr>
          </thead>
          <tbody>
            <tr v-if="upClearHeight && downClearHeight">
              <td>{{ upClearHeight }}</td>
              <td>{{ downClearHeight }}</td>
              <td>{{ updateTime }}</td>
            </tr>
            <tr v-else>
              <td>{{ upClearHeight }}</td>              
              <td>{{ updateTime }}</td>
              <td></td>
              <!-- <td>{{ clearHeightTrendChartStaticData.ql_bh || "--" }}</td> -->
            </tr>
          </tbody>
        </table>
        <!-- <table 
          style="border-collapse: collapse"
          cellspacing="0"
          cellpadding="0"
        >
          <thead>
            <tr v-if="upClearHeight && downClearHeight">
              <th>桥梁编号</th>
              <th>桥梁类型</th>
              <th>所在位置</th>
            </tr>
            <tr v-else>          
              <th>桥梁类型</th>
              <th>所在位置</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-if="upClearHeight && downClearHeight">
              <td>{{ clearHeightTrendChartStaticData.ql_bh || "--" }}</td>
              <td>{{ clearHeightTrendChartStaticData.c_bridgelx || "--" }}</td>
              <td>{{ clearHeightTrendChartStaticData.c_address || "--" }}</td>
            </tr>
            <tr v-else>
              <td>{{ clearHeightTrendChartStaticData.c_bridgelx || "--" }}</td>
              <td>{{ clearHeightTrendChartStaticData.c_address || "--" }}</td> 
              <td></td>          
            </tr>
          </tbody>
        </table> -->
      </div>      
      <div class="subtitle">
        <div class="value">净高值历史监测情况</div>        
      </div>
      <div class="tab-list">
        <div class="tab-item" :class="timeInterval === 0 ? 'active' : ''"  @click="getTimeInterval(0)">自定义时段</div>
        <div class="tab-item" :class="timeInterval === 1 ? 'active' : ''"  @click="getTimeInterval(1)">近1天</div>
        <!-- <div class="tab-item" :class="timeInterval === 3 ? 'active' : ''"  @click="getTimeInterval(3)">近3天</div>
        <div class="tab-item" :class="timeInterval === 7 ? 'active' : ''"  @click="getTimeInterval(7)">近7天</div> -->
        <div class="tab-item" :class="timeInterval === 30 ? 'active' : ''"  @click="getTimeInterval(30)">近1月</div>
      </div>
      <van-calendar 
        v-model:show="showCalendar" 
        type="range" 
        title="选择日期区间" 
        :min-date="new Date(new Date().getTime()- 60 * 24 * 3600 * 1000)" 
        :max-date="new Date()" 
        @confirm="onConfirm" 
      />
      <div id="secondChart" class="second-chart"></div>
    </div>
    <div class="source">
      <div class="name">广东省交通运输厅</div>
      <div class="name">数据来源：广东省航道事务中心</div>
    </div>
    <!-- 弹窗 -->    
    <van-dialog 
      v-model:show="isShow" 
      confirm-button-text="我知道了" 
      confirm-button-color="#2D78ED"
    >
      <div v-for="(item,index) in dialogContent" :key="index">
        <div class="dialog-title">{{ item.title }}</div>
        <div class="dialog-content">{{ item.content }}</div>
      </div>        
    </van-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from "vue";
  import errorImg from "../../static/images/no-image.png"
  // 引入api
  import {
    regionChart, //桥梁净高监测详情
    clearHeightDetail, //桥梁净高监测详情
    clearHeightTrendChart, //桥梁净高监测趋势图
    getBridgeList, //获取桥梁列表（可模糊搜索）
    getRegionList, //获取区域中心列表
    getWaterwayList, //获取所属航道
    clearHeightTrendChartStatic, //桥梁动态通航净高数据
  } from "../../utils/apis";

  import * as echarts from 'echarts/core';
  import { GridComponent, DataZoomComponent, TooltipComponent, LegendComponent } from 'echarts/components';
  import { BarChart, LineChart } from 'echarts/charts';
  import { UniversalTransition } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';
  import { showToast } from "vant";

  echarts.use([GridComponent, DataZoomComponent, TooltipComponent, LegendComponent, BarChart, LineChart, CanvasRenderer, UniversalTransition]);

  const searchValue = ref('');
  const regionName = ref('');
  const isShowSearchList = ref(false);
  const searchList = ref([]);
  const onSearch = () => {
    // clearHeightDetailFn();
    getBridgeListFn(searchValue.value,1);
  };
  const clickSearch = () => {
    getBridgeListFn(searchValue.value,1);
  };
  const handleChoose = (bridgeName,regionname) => {
    searchValue.value = bridgeName;
    regionName.value = regionname;
    leftVal.value = "";
    rightVal.value = "";
    isShowSearchList.value = false;
    clearHeightDetailFn();
    clearHeightTrendChartFn();
    // clearHeightTrendChartStaticFn();
  };

  const searchValue2 = ref('英德人民大桥');
  const isShowSearchList2 = ref(false);
  const searchList2 = ref([]);
  const onSearch2 = () => {
    // clearHeightTrendChartFn();
    getBridgeListFn(searchValue2.value,2);
  };
  const clickSearch2 = () => {
    getBridgeListFn(searchValue2.value,2);
  };
  const handleChoose2 = (bridgeName) => {
    searchValue2.value = bridgeName;
    isShowSearchList2.value = false;
    clearHeightTrendChartFn();
  };

  const getBridgeListFn = (val,type) => {
    getBridgeList(val).then((res) => {
      if(res.code === 200 && res.data.length){
        if(type === 1){
          isShowSearchList.value = true;
          searchList.value = res.data;
        }else if(type === 2){
          isShowSearchList2.value = true;
          searchList2.value = res.data;
        }        
      }else{
        showToast("暂无数据");
      }
    });
  };

  const tableData1 = ref([]);
  const tableData2 = ref([]);
  const isChecked = ref(0);
  const handleChecked = (item,index) => {
    isChecked.value = index;
    searchValue.value = item.bridgeName;
    regionName.value = item.regionName;
    clearHeightTrendChartFn();
    // clearHeightTrendChartStaticFn();
  };
  
  const departBridgeTotal = ref('');
  const xAxisFirstData = ref([]);
  const seriesFirstData = ref([]);
  const regionChartFn = () => {
    regionChart().then((res) => {
      if(res.code === 200 && res.data.length){
        departBridgeTotal.value = res.data[0].departBridgeTotal;
        let data = res.data[0].regionBridgeTotal;
        tableData1.value = data;
        let xAxis = [];
        let series = [];
        data.forEach((item) => {
          xAxis.push(item.regionName);
          series.push(item.regionBridgeTotal)
        });
        xAxisFirstData.value = xAxis;
        seriesFirstData.value = series;
        initFirstChart();
      }
    });
  };
  const initFirstChart = () => {
    let firstChart = echarts.getInstanceByDom(document.getElementById("firstChart"));
    if(firstChart != null && firstChart != "" && firstChart != undefined){
      firstChart.dispose();
    }
    firstChart = echarts.init(document.getElementById('firstChart'));

    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true, //限制在图表区域内
      },
      legend: {
        textStyle: {
          fontSize: 12
        },
        itemGap: 4,
        icon: 'circle',
        itemWidth: 6,
        itemHeight: 6,
        left:'30px'
      },
      grid: {
        top: '25%',
        left: '5%',
        right: '60',
        bottom: '5%',
        containLabel: true
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          // maxValueSpan: 10,
          startValue: 0,
          endValue: 9,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: 'category',
        name: '区域中心',        
        data: xAxisFirstData.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        }, 
        axisLabel: { 
          interval: 0,
          formatter: function (value) {
            //x轴的文字改为竖版显示
            var str = value.split("");
            return str.join("\n");
          },          
        },
      },
      yAxis: {
        type: 'value',
        name: '数量',
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
          padding: [0,30,0,0]
        },
        nameGap: 15,
      },
      series: [
        {
          name: '等级航道桥梁',
          data: seriesFirstData.value,
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            color: '#6B9BFD'
          },
          label: {
            show: true,
            position: 'top'
          },
        }
      ]
    };
    option && firstChart.setOption(option);
  };

  //时段
  const date1 = ref('');
  const date2 = ref('');
  const timeInterval = ref(1);
  const showCalendar = ref(false);
  const getTimeInterval = (val) => {
    timeInterval.value = val;
    let time = new Date().getTime();
    if(val === 0){
      showCalendar.value = true;
    }else if(val === 1){
      let endTime = time - 1 * 24 * 3600 * 1000;
      date1.value = new Date(endTime).format('yyyy-MM-dd');
      date2.value = new Date(time).format('yyyy-MM-dd');
    }else if(val === 3){
      let endTime = time - 3 * 24 * 3600 * 1000;
      date1.value = new Date(endTime).format('yyyy-MM-dd');
      date2.value = new Date(time).format('yyyy-MM-dd');
    }else if(val === 7){
      let endTime = time - 7 * 24 * 3600 * 1000;
      date1.value = new Date(endTime).format('yyyy-MM-dd');
      date2.value = new Date(time).format('yyyy-MM-dd');
    }else if(val === 30){
      let endTime = time - 30 * 24 * 3600 * 1000;
      date1.value = new Date(endTime).format('yyyy-MM-dd');
      date2.value = new Date(time).format('yyyy-MM-dd'); 
    }
    clearHeightTrendChartFn();
    // clearHeightTrendChartStaticFn();
  };
  const onConfirm = (values) => {
    const [start, end] = values;
    date1.value = start.format('yyyy-MM-dd');
    date2.value = end.format('yyyy-MM-dd');
    showCalendar.value = false;
    clearHeightTrendChartFn();
    // clearHeightTrendChartStaticFn();
  };
  // const baseApi = 'http://210.76.81.180/traffic-channel/attach/img'
  const baseApi = `${import.meta.env.VITE_APP_BASE_API}attach/img`

  const region = ref('');
  const wateway = ref('');
  const bridgeName = ref('');
  const upClearHeight = ref('');
  const downClearHeight = ref('');
  const updateTime = ref('');
  const waterLevel = ref('');
  const waterlevelUpdateTime = ref('');
  const bridgeImage = ref('');
  const xAxisSecondData = ref([]);
  const seriesSecondData = ref([]);
  const qljg = ref('');
  const clearHeightTrendChartFn = () => {
    clearHeightTrendChart(searchValue.value,regionName.value,date1.value,date2.value).then((res) => {
      if(res.code === 200 && res.data.length){
        let data = res.data[0];
        region.value = data.region;
        wateway.value = data.wateway;
        bridgeName.value = data.bridgeName;
        upClearHeight.value = data.upClearHeight;
        downClearHeight.value = data.downClearHeight;
        updateTime.value = data.updateTime;
        waterLevel.value = data.water_level;
        qljg.value = data.qljg;
        waterlevelUpdateTime.value = data.waterupdatetime;
        if(data.bridgeImage!=null && data.bridgeImage!='' && data.bridgeImage != undefined){
          bridgeImage.value = data.bridgeImage.split('img')[1];
        }
        
        xAxisSecondData.value = [];
        seriesSecondData.value = [];
        // data.clearHeightHistoryData.forEach((item) => {
        //   if(timeInterval.value === 1){
        //     xAxisSecondData.value.push(item.updateTime.slice(11,16));
        //   }else{
        //     xAxisSecondData.value.push(item.updateTime.slice(5,10));
        //   }      
        //   seriesSecondData.value.push(item.cJgz);
        // });
        // initSecondChart();       
        if(data.clearHeightHistoryData.length){
          let chartData = sortClass(data.clearHeightHistoryData);
          if(chartData.length === 1){
            let arr = [];
            chartData[0].forEach((item) => {
              if(timeInterval.value === 1){
                xAxisSecondData.value.push(item.updateTime.slice(11,16));
              }else{
                xAxisSecondData.value.push(item.updateTime.slice(5,10));
              }  
              arr.push({ 
                name: item.jgdMc,
                value: item.cJgz,
              });
            });
            seriesSecondData.value = [
              {
                data: arr,
                type: 'line',
                itemStyle: {
                  color: '#75a7d4'
                },
              }
            ];
          }else{
            let arr1 = [];
            let arr2 = [];
            chartData[0].forEach((item) => {
              if(timeInterval.value === 1){
                xAxisSecondData.value.push(item.updateTime.slice(11,16));
              }else{
                xAxisSecondData.value.push(item.updateTime.slice(5,10));
              }  
              arr1.push({ 
                name: item.jgdMc,
                value: item.cJgz,
              });
            });
            chartData[1].forEach((item2) => {           
              arr2.push({ 
                name: item2.jgdMc,
                value: item2.cJgz,
              });
            });
            seriesSecondData.value = [
              {
                data: arr2,
                type: 'line',
                itemStyle: {
                  color: '#91cc75'
                },
              },
              {
                data: arr1,
                type: 'line',
                itemStyle: {
                  color: '#75a7d4'
                },
              },            
            ];  
          }  
        }
        initSecondChart();
      }
    });
  };
  const clearHeightTrendChartStaticData = ref({});
  const clearHeightTrendChartStaticFn = () => {
    clearHeightTrendChartStatic(searchValue.value,regionName.value,date1.value,date2.value).then((res) => {
      if(res.code === 200 && res.data.length){
        clearHeightTrendChartStaticData.value = res.data[0];
      }
    });
  };
  //数组分类
  const sortClass = (sortData) => {
    const groupBy = (array, f) => {
      let groups = {};
      array.forEach((o) => {
        let group = JSON.stringify(f(o));
        groups[group] = groups[group] || [];
        groups[group].push(o);
      });
      return Object.keys(groups).map((group) => {
        return groups[group];
      });
    };
    const sorted = groupBy(sortData, (item) => {
      return item.jgdMc; // 返回需要分组的对象
    });
    return sorted;
  };
  const initSecondChart = () => {
    let secondChart = echarts.getInstanceByDom(document.getElementById("secondChart"));
    if(secondChart != null && secondChart != "" && secondChart != undefined){
      secondChart.dispose();
    }
    secondChart = echarts.init(document.getElementById('secondChart'));

    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        confine: true, //限制在图表区域内
        formatter: function (params) {
          let template = `${params[0].axisValue}<br>`;         
          for(let i = 0; i < params.length; i++){
            let item = params[i];
            template += item.marker + item.data.name + ': ' + item.data.value + '<br>'
            // return params[x].data.name + ':' + params[x].data.value
          }  
          return template  
        },        
      },
      grid: {
        top: '20%',
        left: '10%',
        right: '60',
        bottom: '5%',
        containLabel: true
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          maxValueSpan: 60,
          zoomLock: false,
        },
      ],
      xAxis: {
        type: 'category',
        name: '时间',        
        data: xAxisSecondData.value,
        axisTick: {
          alignWithLabel: true, //控制刻度线是否与刻度标签对齐
          show: false, //是否显示刻度线
        },
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },   
        axisLabel: { 
          interval: 'auto', 
          rotate: 60,

          // overflow: 'truncate',
          // formatter(v){
          //     return ' '.repeat(4)+v+' '.repeat(4);
          // } 
        },
      },
      yAxis: {
        type: 'value',
        name: '净高值（m）',
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "10px",
          color: "rgba(0,0,0,0.45)",
        },
        nameGap: 15, 
      },
      series: seriesSecondData.value
    };
    option && secondChart.setOption(option);
  };

  //下拉选择
  const showLeft = ref(false);
  const leftVal = ref("");
  const leftList = ref([]);
  const showRight = ref(false);
  const rightVal = ref("");
  const rightList = ref([]);
  const setLeft = (item) => {
    if(item.region === '全部'){
      leftVal.value = "";
      showLeft.value = false;
      rightVal.value = "";
      searchValue.value = "";
      regionName.value = "";
      clearHeightDetailFn();
    }else{
      leftVal.value = item.region;
      showLeft.value = false;
      rightVal.value = "";
      searchValue.value = "";
      regionName.value = "";
      getWaterwayListFn(item.region);
      clearHeightDetailFn();
    }   
  };
  const getLeftList = () => {
    showLeft.value = !showLeft.value;
    showRight.value = false;
  };
  const setRight = (item) => {
    searchValue.value = "";
    regionName.value = "";
    rightVal.value = item.waterwayName;
    showRight.value = false;
    clearHeightDetailFn();
  };
  const getRightList = () => {
    showRight.value = !showRight.value;
    showLeft.value = false;
  };

  const clearHeightBridgeInstallSum = ref('');
  const clearHeightBridgeSum = ref('');
  const clearHeightDetailFn = () => {
    clearHeightDetail(leftVal.value,rightVal.value,searchValue.value).then((res) => {
      if(res.code === 200 && res.data.length){
        isChecked.value = 0;
        clearHeightBridgeInstallSum.value = res.data[0].clearHeightBridgeInstallSum;
        clearHeightBridgeSum.value = res.data[0].clearHeightBridgeSum;
        tableData2.value = res.data[0].clearHeightDetail;
        searchValue.value = tableData2.value[0].bridgeName; 
        regionName.value = tableData2.value[0].regionName;
        clearHeightTrendChartFn();    
        // clearHeightTrendChartStaticFn(); 
      }
    });
  };

  //弹窗
  const isShow = ref(false);
  const dialogContent = ref([]);
  const handleShow = (val) => {
    let firstChart = echarts.getInstanceByDom(document.getElementById("firstChart"));
    firstChart.dispatchAction({
      type: 'hideTip'
    });
    let secondChart = echarts.getInstanceByDom(document.getElementById("secondChart"));
    secondChart.dispatchAction({
      type: 'hideTip'
    });
    if(val === "first"){
      dialogContent.value = [
        {
          title: "等级航道桥梁数量",
          content: "航道部门管辖1-7级等级航道上所建的桥梁总数（实现按区域中心进行展示）"
        }
      ];
    }else if(val === "second"){
      dialogContent.value = [
        {
          title: "已安装净高终端的桥梁数",
          content: "已安装净高终端的对应桥梁总座数（接入智慧航道系统的航道部门维护和非航道部门维护的桥梁）"
        },
        {
          title: "桥梁净高监测终端总数量",
          content: "已安装桥梁净高监测终端的总数（接入智慧航道系统的航道部门维护和非航道部门维护的桥梁）（注：明细【属性信息项】：区域中心、所属航道、所属桥梁名称、上行通航孔净高值、下行通航孔净高值、数据更新时间）"
        }
      ];
    }else{
      dialogContent.value = [
        {
          title: "已安装净高终端的桥梁图片",
          content: "已安装净高终端的桥梁图片（接入智慧航道系统的航道部门维护和非航道部门维护的桥梁）"
        }
      ];
    }    
    isShow.value = true;
  };

  //获取日期
  const currentYearMonth1 = ref("");
  const currentYearMonth2 = ref("");

  //获取区域中心
  const getRegionListFn = () => {
    getRegionList().then((res) => {
      if(res.code === 200 && res.data.length){
      let item={region: "全部"}
        leftList.value = res.data;
        leftList.value.unshift(item)
      }
    });
  };

  //获取所属航道
  const getWaterwayListFn = (region) => {
    getWaterwayList(region).then((res) => {
      if(res.code === 200 && res.data.length){
        rightList.value = res.data;
      }
    });
  };

  onMounted(() => {
    if(sessionStorage.getItem("watermarkTxt")){
      //加水印
      watermark.init({ 
        watermark_x: -30, // 水印起始位置x轴坐标
        watermark_y: -20, // 水印起始位置Y轴坐标
        watermark_x_space: 20, // 水印x轴间隔
        watermark_y_space: 80, // 水印y轴间隔
        watermark_alpha: 0.07, // 水印透明度
        watermark_fontsize: '14px', // 水印字体大小
        watermark_width: 100, // 水印宽度
        watermark_height: 30,
        watermark_txt: sessionStorage.getItem("watermarkTxt"), // 水印的内容
        watermark_angle: 25, // 水印倾斜度数
        watermark_rows: 0, // 水印行数
        watermark_cols: 0, // 水印列数
        watermark_font: '微软雅黑', // 水印字体
        watermark_color: 'black', // 水印字体颜色 
      });
    }
    
    currentYearMonth1.value = new Date().getFullYear() + ".01";
    currentYearMonth2.value = new Date().format("yyyy.MM");
    date1.value = new Date(new Date().getTime()- 1 * 24 * 3600 * 1000).format('yyyy-MM-dd');
    date2.value = new Date().format('yyyy-MM-dd');

    regionChartFn();
    clearHeightDetailFn();
    getRegionListFn();
  });

</script>

<style lang="scss" scoped>
  .container{
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    .header{
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.08);
      .title {
        color: #262626;
        font-size: 18px;
        font-weight: 500;
        padding: 12px 0px 10px 20px;
        position: relative;
      }
      .time {
        display: flex;
        align-items: center;
        color: #8C8C8C;        
        font-size: 14px;
        padding-right: 20px;
        img{
          width: 18px;
          height: 18px;
          padding-right: 5px;
        }
      }
    }
    .unit {
      display: flex;
      flex-direction: row-reverse;
      padding: 8px 20px 8px 0;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
    }
    .content{
      background-color: #fff;
      border-radius: 8px;
      margin: 0px 20px 20px 20px;
      .title{
        color: #262626;
        font-size: 16px;
        font-weight: 500;
        position: relative;       
        padding: 16px 0;
        margin: 0 16px;
        border-bottom: 1px solid #D9D9D9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img{
          width: 16px;
          height: 16px;
        }
      }
      .amount{
        display: flex;        
        .info{
          width: 100%;
          height: 80px;
          background-image: url(../../static/images/bridge-bg-one.png);
          background-repeat: no-repeat;
          background-size: 100% 80px;
          display: flex;
          align-items: center;
          margin: 16px;
          img{
            width: 42px;
            height: 42px;
            margin: 0 16px;
          }
          .detail{
            display: flex;
            flex-direction: column;
            .name{
              font-size: 14px;
              color: #595959;
            }
            .value{
              font-size: 24px;
              font-weight: 800;
              color: #0473DE;
            }
          }
        }
      }
      .subtitle{
        font-size: 14px;
        font-weight: 500;   
        color: #262626;
        position: relative; 
        padding-left: 24px;
      }
      .subtitle::before{
        content: '';
        background-color: #2D78ED;
        position: absolute;
        top: 55%;
        left: 5%;
        height: 14px;
        width: 2px;
        transform: translateY(-50%);
      }
      .first-chart{
        height: 200px;
        margin: 10px 0;
      }
      .second-chart{
        height: 200px;
        margin: 10px 0;
      }
      .count1{
        display: flex;        
        .info{
          width: 100%;
          height: 80px;
          background-image: url(../../static/images/bridge-bg-two.png);
          background-repeat: no-repeat;
          background-size: 100% 80px;
          display: flex;
          align-items: center;
          margin: 16px;
          img{
            width: 42px;
            height: 42px;
            margin: 0 16px;
          }
          .detail{
            display: flex;
            flex-direction: column;
            .name{
              font-size: 14px;
              color: #595959;
            }
            .value{
              font-size: 24px;
              font-weight: 800;
              color: #0473DE;
            }
          }
        }
      }
      .count2{
        display: flex;        
        .info{
          width: 100%;
          height: 80px;
          background-image: url(../../static/images/bridge-bg-three.png);
          background-repeat: no-repeat;
          background-size: 100% 80px;
          display: flex;
          align-items: center;
          margin: 0 16px 16px 16px;
          img{
            width: 42px;
            height: 42px;
            margin: 0 16px;
          }
          .detail{
            display: flex;
            flex-direction: column;
            .name{
              font-size: 14px;
              color: #595959;
            }
            .value{
              font-size: 24px;
              font-weight: 800;
              color: #07c18f;
            }
          }
        }
      }
      // :deep(.van-search__content) {
      //   background: #fff;
      //   border: 1px solid #d4d4d4;
      //   border-radius: 20px;
      // }    
      // :deep(.van-dropdown-menu__bar) {
      //   height: 30px;        
      // } 
      .image{
        height: 200px;       
        margin: 16px;
        position: relative;        
        img{
          width: 100%;
          height: 100%;
        }
        .tip-one{
          width: 120px;
          height: 60px;
          color: #494949;
          // background-color: #414c63;
          // border-radius: 4px;
          position: absolute;
          top: 72%;
          left: 32%;
          font-size: 12px;
          zoom: 0.7;
          padding: 5px;
          span{
            padding-left: 5px;
          }
        }
        .tip-two{
          // width: 180px;
          // height: 60px;
          color: #fff;
          background-color: #2D78ED;
          border-radius: 4px;
          position: absolute;
          top: 37%;
          left: 52%;
          font-size: 12px;
          zoom: 0.8;
          padding: 6px;
          span{
            padding-left: 5px;
          }
        }
        .tip-three{
          width: 120px;
          height: 60px;
          color: #494949;
          position: absolute;
          top: 35%;
          left: 30%;
          font-size: 12px;
          zoom: 0.7;
          padding: 8px;
          span{
            padding-left: 5px;
          }
        }
      }    
      .table {
        margin: 16px;
        overflow: hidden;
        padding-bottom: 10px;
        th {
          padding: 4px;
          // border: 1px solid #d9d9d9;
          font-size: 14px;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          background-color: #f8f9fb;
        }
        .tbody {
          height: 100px; /* 设置表格体容器的高度 */
          overflow-y: auto; /* 启用垂直滚动条 */
          // width: calc(110% - 24px);
        }
        .tbody {
          td {
            padding: 4px;
            // border: 1px solid #d9d9d9;
            font-size: 14px;
            font-weight: 400;
            color: #595959;
            text-align: center;
          }
        }
      }   
      .details{  
        // padding: 0 10px; 
        margin: 0 16px;
        table{
          th{
            width: 120px;
            color: #a1a7b0;
            background-color: #e9f0ff;
            padding: 2px 0;
          }
          td{
            width: 120px;
            text-align: center;
            padding: 10px 0;
            color: #262626;
          }
        }   
      }
      .choose {
        display: flex;
        // justify-content: flex-end;
        margin: 4px 0px 0px 16px;
        .left,
        .right {
          width: 124px;
          height: 22px;
          background: #ffffff;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
          // border: 1px solid #d9d9d9;
          text-align: center;
          line-height: 22px;
          position: relative;
          .option {
            .choose-input {
              width: 94%;
              height: 92%;
              // border: none;
              text-align: center;
            }
            .choose-list {
              position: absolute;
              font-size: 12px;
              font-weight: 400;
              color: #595959;
              width: 124px;
              background: #fff;
              z-index: 999;
              .list {
                max-height: 180px;
                overflow-y: scroll;
                margin-top: -2px;
                border: 1px solid #d9d9d9;
                li {
                  list-style-type: none;
                }
              }
            }
          }
        }
        .right {
          margin-right: 25px;
          margin-left: 16px;
        }
      }
      .tab-list{
        display: flex;
        margin: 16px;
        .tab-item{
          background: #FFFFFF;
          box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.08);
          border-radius: 4px;
          opacity: 1;
          border: 1px solid #F0F0F0;
          padding: 4px 8px;
          margin-right: 10px;
        }
        .active{
          background: #165DFF;
          color: #fff;
        }
      }
      .table-box {
        width: 320px;
        min-height: 100px;
        // max-height: 200px;
        overflow: scroll;
        scrollbar-width: none;
        scrollbar-color: transparent;
        -ms-overflow-style: none;
        .table {
          // margin-left: 18px;
          // margin-right: 16px;
          width: 320px;
          min-height: 100px;
          max-height: 200px;
          overflow: scroll;
          scrollbar-width: none;
          scrollbar-color: transparent;
          -ms-overflow-style: none;
          th,
          td {
            padding: 4px;
            color: #595959;
            text-align: center;
          }
          .tbody {
            height: 100px; /* 设置表格体容器的高度 */
            overflow-y: auto; /* 启用垂直滚动条 */
            width: 100%;
            overflow-x: auto;
          }
          tr:nth-child(even) {
            background-color: #f3f7ff;
          }
        }
      }
      .table-box::-webkit-scrollbar {
        width: 0;
        height: 0;
        background-color: transparent;
      }
      .table-box::-webkit-scrollbar-thumb {
        background-color: transparent;
      }
      .search{
        position: relative; 
        margin: 0px 4px;
        .search-list{
          height: 180px;
          overflow-y: scroll;
          border: 1px solid #f7f8fa;
          margin: -10px 12px 0px 12px;
          position: absolute;
          background-color: #fff;
          width: 100%;
          width: -moz-available;
          width: -webkit-fill-available;
          width: fill-available;
          z-index: 9999;
          .search-item{
            margin: 10px 20px;
            padding-bottom: 10px;
            color: #595959;
            border-bottom: 1px solid #ccc;
          }
        }
      }
    }
    .source{
      text-align: center;
      padding: 5px 0;
      color: #8C8C8C;
      .name{
        margin-bottom: 5px;
      }
    }
    .dialog-title{
      text-align: center;
      padding: 20px 0;
      font-size: 16px;
      font-weight: 500;
      color: #000000;
    }
    .dialog-content{
      text-align: center;
      padding: 0 20px 20px 20px;
      font-size: 14px;
      font-weight: 400;
    }
    :deep(.van-dialog__content){
      min-height: 118px;
      max-height: 293px;
      overflow-y: scroll;
    }
  }
</style>